<%--
  Created by IntelliJ IDEA.
  User: caojian
  Date: 2017/3/10
  Time: 下午5:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="xmb" uri="http://xmb.suishoupai.com/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>商品列表</title>
    <jsp:include page="common/common_css.jsp"/>
</head>
<body>
<jsp:include page="common/header.jsp"/>
<div class="ui main container">
    <jsp:include page="common/message.jsp"/>
    <button class="ui right floated basic button JS-add">
        <i class="add circle icon"></i>
        新增商品
    </button>
    <!--商品列表数据-->
    <table class="ui celled padded table">
        <thead>
        <tr>
            <th class="center aligned">商品id</th>
            <th class="center aligned">商品名</th>
            <th class="center aligned">单价</th>
            <th class="center aligned">剩余数量</th>
            <th class="center aligned">销量</th>
            <th class="center aligned">分类</th>
            <th class="center aligned">状态（上架/下架）</th>
            <th class="center aligned">时间</th>
            <th class="center aligned">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:choose>
            <c:when test="${fn:length(goodsList.list) > 0}">
                <c:forEach items="${goodsList.list}" var="item">
                    <tr data-id="${item.goods.id}">
                        <td class="center aligned">${item.goods.id}</td>
                        <td class="center aligned">${item.goods.name}</td>
                        <td class="center aligned">${item.goods.price}</td>
                        <td class="center aligned">${item.goods.number}</td>
                        <td class="center aligned">${item.goods.salesVolume}</td>
                        <td class="center aligned">${item.category.name}</td>
                        <td class="center aligned">
                            <div class="ui simple dropdown large label">
                                <div>
                                    <label>
                                        <c:choose>
                                            <c:when test="${item.goods.status==1}">
                                                上架
                                            </c:when>
                                            <c:when test="${item.goods.status==2}">
                                                下架
                                            </c:when>
                                            <c:otherwise>
                                                不知道的状态
                                            </c:otherwise>
                                        </c:choose>
                                    </label>
                                    <i class="dropdown icon"></i>
                                </div>
                                <div class="menu">
                                    <div class="item JS-status ${item.goods.status==1?'disabled':''}" data-value="1">
                                        <label>上架</label>
                                    </div>
                                    <div class="item JS-status ${item.goods.status==2?'disabled':''}" data-value="2">
                                        <label>下架</label>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="center aligned">
                            <xmb:formatDate value="${item.goods.createTime}"/>
                        </td>
                        <td class="center aligned">
                            <button class="ui basic button JS-edit">
                                <i class="edit icon"></i>
                                修改
                            </button>
                        </td>
                    </tr>
                </c:forEach>
            </c:when>
            <c:otherwise>
                <tr>
                    <td class="center aligned" colspan="9">没有一个商品，<a href="" class="JS-add">点击添加</a></td>
                </tr>
            </c:otherwise>
        </c:choose>
        </tbody>
        <tfoot>
        <tr>
            <th colspan="9" class="center aligned">
                <c:set var="pagination" scope="session" value="${goodsList}"/>
                <c:set var="paginationAction" scope="session" value="sale/goods"/>
                <jsp:include page="common/page.jsp"/>
            </th>
        </tr>
        </tfoot>
    </table>
</div>
<!--确认弹窗-->
<div id="JS-modal-confirm" class="ui basic modal">
    <div class="content" style="text-align: center;">
        <div style="background-color: white;display: inline-block;padding: 20px 60px;border-radius: 5px;">
            <div id="JS-modal-confirm-title" style="display: inline-block;color: black;margin-bottom: 50px;">
            </div>
            <br>
            <div class="actions">
                <div class="ui small primary blue column approve button" style="display: inline-block;">
                    OK
                </div>
                <div class="ui small primary blue column cancel button"
                     style="display: inline-block;margin-left: 30px;">Cancel
                </div>
            </div>
        </div>
    </div>
</div>

<jsp:include page="common/footer.jsp"/>
<jsp:include page="common/common_js.jsp"/>
<script>
    $(function () {
        $('.JS-add').click(function () {
            window.location.href = ROOT + "/sale/goods/add";
            return false;
        });
        $('.JS-edit').click(function () {
            var id = $(this).parent().parent().data("id");
            window.location.href = ROOT + "/sale/goods/" + id;
            return false;
        });
        $('.JS-status').click(function () {
            var dom = $(this);
            var value = dom.data('value');
            var id = dom.parent().parent().parent().parent().data('id');
            var url = [ROOT, "/sale/goods/", id];
            var text;
            if (value == 1) {
                url.push('/shelves');
                text = "上架";
            } else if (value == 2) {
                url.push('/offShelves');
                text = "下架";
            } else {
                throw new Error("不认识的" + value);
            }
            $('#JS-modal-confirm-title').text("确定将'" + id + "'置为" + text + "？");
            $('#JS-modal-confirm').modal({
                closable: false, allowMultiple: true, observeChanges: true,
                onApprove: function () {
                    if ($('#JS-modal-confirm .approve.button').hasClass('loading')) {
                        return false;
                    }
                    $('#JS-modal-confirm .approve.button').addClass('loading');
                    common.ajax({
                        url: url.join(''),
                        data: {},
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            dom.parent().prev().find("label").text(text);
                            dom.parent().find('.JS-status').removeClass('disabled');
                            dom.addClass('disabled');
                            $('#JS-modal-confirm').modal('hide');
                        },
                        complete: function () {
                            $('#JS-modal-confirm .approve.button').removeClass('loading');
                        }
                    });
                    return false;
                },
                onDeny: function () {
                    return !$('#JS-modal-confirm .approve.button').hasClass('loading');
                }
            }).modal("show");
        });
    });
</script>
</body>
</html>
